<template>
  <div ref="footRef" style="padding: 50px;background-color: #FEF4F4;display: flex">

    <div>
      <div>
        <img src="../../assets/img/logo/logo1.png" height="70" width="70" alt="">
      </div>
      <div style="width: 300px;margin-top: 20px">
        {{ meiJu }}
      </div>
    </div>

    <div style="display: inline-block;margin-left: 10%;">
      <h1 style="font-size: 16px">图书链接</h1>
    </div>

    <div style="display: inline-block;margin-left: 10%;">
      <router-link to="/about">
        <h1 style="font-size: 16px">关于我们</h1>
      </router-link>
    </div>

  </div>
</template>

<script setup>
import axios from "axios";
import {onMounted, ref, watch} from "vue";
import { useElementVisibility } from '@vueuse/core'
import store from "../../store/index.js";


let juList = []

let meiJu = ref("")

const footRef = ref(null)
const footRefVisible = useElementVisibility(footRef)


watch(footRefVisible,()=>{
    //console.log("foot是否出现: "+footRefVisible.value);
    store.commit("SET_FOOTVISIBLE", footRefVisible.value)
},{
    //非惰性
    immediate: true,
    //深度监视
    deep: true
})

const getMeiRi = ()=>{
  axios.get("https://www.mxnzp.com/api/daily_word/recommend?" +
      "count=10&app_id=i8gqarnijmlwtni0" +
      "&app_secret=aHBkdjAwd2RycHg1bXc3aURyejFUQT09").then(res=>{
    //console.log(res.data.data);
    juList = res.data.data;
    meiJu.value  = juList[0].content;
  })
}

setInterval(()=>{
  let i = Math.floor(Math.random() * juList.length);
  meiJu.value = juList[i].content
  //console.log(juList[i].content)
},8000)

setInterval(()=>{
  getMeiRi()
}, 80000)

onMounted(()=>{
  getMeiRi()
})

</script>

<style scoped>
.router-link-exact-active{
  text-decoration: none;
  color: #3faad9;
  font-size: 20px;
}
a{
  text-decoration: none;
  color: black;
}
</style>
